<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <{include file='_common/_loadVarTemplate.tpl'}>
  	<script src="Resource/Script/requireJs/require.js" data-main="Resource/Script/requireJs/_popupIframe"></script>
  </head>
  <body>
  	<pre>
	    使用说明：
	    1,注意使用入口文件Resource/Script/requireJs/_popupIframe 
	    2,根据传入的 uidParentComp ，从父窗口拿到组件 window.parent._ifrmComp[get.uidParentComp] 
        3,子页面中的sonTpl写法可以参考vue的配置文件写法进行书写，入口文件会自动进行 object.assign(对象扩展，复制属性和方法)
	    4,注意子页面中表单控件中的默认值可以使用双向绑定简写 v-model="value.xxx" 
        5,子页面中的vue对象中包含如下变量：
            uidParentComp:父窗体中的弹窗组件对象的uid
            compParent:父窗体中的弹窗组件对象
            value:父窗体中的弹窗组件对象的value
	    4,可在父页面的sonTpl中定义如下事件:
	    	弹窗弹出前触发：colName:onOpen()
	    	表单提交前触发： colName:onSubmit()
	    	表单提交后触发:  colName:afterSubmit()
            注意：确认按钮属于父窗体的控件，并不是iframe页面内的控件。
	    6，在子页面中调用项目中封装的组件（如客户选择等），需要声明异步组件，如下：
	    	components:{
	          'comp-text':resolve=>require(['_vue!pathComponent/comp-text'], resolve),
	        },
	    7，本页面使用的是自己定义表单的写法，也可以参考：<a href='<{url controller=$smarty.get.controller action="PopupIframeMainForm" uidParentComp=$smarty.get.uidParentComp}>'>弹窗页面中使用通用的mainForm模式</a>
	    8，弹窗页面中使用通用的mainSonForm模式 to do
	</pre>
    <div id='div1'>
    	常用事件：
    	<button @click="userClick">自定义事件</button>
    	<button @click="dumpComp">输出父窗体iframe弹窗组件</button> 
    	<button @click="dumpValue">获得页面json值</button>
    	<button @click="dumpRow">父窗体中的主表记录row</button>
    	<button @click="dumpRowSon">父窗体中的子表记录rowSon</button>

    	<br />表单：
    	<el-form ref="form" :model="value" label-width="120px" size="mini" >
    	  <el-form-item label="姓名">
    	    <el-input v-model="value.name"></el-input>
    	  </el-form-item>
    	  <el-form-item label="电话">
    	    <el-input v-model="value.tel"></el-input>
    	  </el-form-item>
    	  <el-form-item label="comp-text">
    	    <comp-text></comp-text>
    	  </el-form-item>
    	  <el-form-item label="comp-popup-select">
    	    <comp-text></comp-text>
    	  </el-form-item>
    	  <!-- <el-form-item label="活动区域">
    	    <el-select v-model="value.region" placeholder="请选择活动区域">
    	      <el-option label="区域一" value="shanghai"></el-option>
    	      <el-option label="区域二" value="beijing"></el-option>
    	    </el-select>
    	  </el-form-item> -->
    	</el-form>

    </div>
  </body>
</html>